<template>
    <div class="bnh-pieBox">
        <div class="bnh-pieBox-head">
            <p class="bnh-pieBox-title">日增统计</p>
        </div>
        <div :class="className" :id="id" :style="{height:height,width:width}" ref="myEchart"></div>
    </div>
</template>
<script>
    import echarts from 'echarts'
    export default{
          props: {
            className: {
                type: String,
                default: 'yourClassName'
                },
                id: {
                    type: String,
                    default: 'echartsPie'
                },
                width: {
                    type: String,
                    default: '330px'
                },
                height: {
                    type: String,
                    default: '230px'
                }
            },
            data() {
                return {
                chart: null
                }
            },
        mounted() {
            this.initChart();
        },
        beforeDestroy() {
            if (!this.chart) {
            return
            }
            this.chart.dispose();
            this.chart = null;
        },
        methods:{
            initChart(){
                this.chart = echarts.init(this.$refs.myEchart);
                // 把配置和数据放这里
                this.chart.setOption({
                        calculable : true,
                        xAxis : [
                            {   
                                axisLabel:{
                                    interval:0
                                },
                                type : 'category',
                                boundaryGap : false,
                                  axisLine:{
                                    lineStyle:{
                                        color:'#999',
                                        width:0,//这里是为了突出显示加上的
                                    }
                                },
                                data : ['05-09','05-10','05-11','05-12','05-13','05-14','05-15']
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                     axisLine:{
                                    lineStyle:{
                                        color:'#999',
                                        width:0,//这里是为了突出显示加上的
                                    }
                                } 
                            }
                        ],
                        series : [
                            {
                                name:'成交',
                                type:'line',
                                smooth:true,
                                data:[10, 12, 21, 54, 10, 20, 50],
                                itemStyle:{ 
                                    normal:{ color: "#58BB53" } //坐标圆点的颜色
                                }, 
                                lineStyle:{ 
                                    normal:{ width:2,color: "#58BB53"}//线条的颜色及宽度
                                },
                            },
                        ],
                })
            }
        }
    }
</script>
<style scoped>
.bnh-pieBox{background: #fff;height: 4.52rem;position: relative}
.bnh-pieBox-head{height: 1rem;position: absolute;top: 0;left: 0;width: 7.5rem}
 #echartsPie{margin-left: 0.5rem;margin-top: -20px}
 .bnh-pieBox-title{font-size: 0.36rem;color: #000;font-weight: bold;position: absolute;top: 0.1rem;left: 0.28rem}
</style>

